<template>
<div class="userinfo">
  <mynav class="navclass"></mynav>
  <div class="changeinfo">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="个人信息"></el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="form.input1" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="学号">
        <el-input v-model="form.input2" placeholder="请输入学号"></el-input>
      </el-form-item>
      <el-form-item label="寝室">
        <el-select v-model="form.region" placeholder="请选择校区">
          <el-option label="铁道校区" value="tiedao"></el-option>
          <el-option label="湘雅校区" value="xiangya"></el-option>
          <el-option label="校本部" value="benbu"></el-option>
          <el-option label="南校区" value="nanxiao"></el-option>
        </el-select>
        <el-select v-model="form.region" placeholder="请选择楼栋">
          <el-option label="铁三舍" value="old"></el-option>
          <el-option label="铁十舍" value="old"></el-option>
          <el-option label="铁十一舍" value="old"></el-option>
          <el-option label="新一舍" value="new"></el-option>
          <el-option label="新二舍" value="new"></el-option>
        </el-select>
        <el-select v-model="form.region" placeholder="请选择寝室号">
          <el-option label="510" value="number"></el-option>
          <el-option label="511" value="number"></el-option>
          <el-option label="512" value="number"></el-option>
          <el-option label="513" value="number"></el-option>
          <el-option label="514" value="number"></el-option>
          <el-option label="515" value="number"></el-option>
          <el-option label="516" value="number"></el-option>
          <el-option label="517" value="number"></el-option>
          <el-option label="518" value="number"></el-option>
          <el-option label="519" value="number"></el-option>
          <el-option label="520" value="number"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="绑定角色">
        <el-radio-group v-model="form.resource">
          <el-radio label="寝室长"></el-radio>
          <el-radio label="普通成员"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="在校状态">
        <el-radio-group v-model="form.resource2">
          <el-radio label="在校"></el-radio>
          <el-radio label="离校"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确认修改</el-button>
        <el-button>恢复</el-button>
      </el-form-item>
    </el-form>
    <el-divider></el-divider>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="账号安全"></el-form-item>
      <el-form-item label="原始密码">
        <el-input v-model="form.input3" placeholder="输入原始密码"></el-input>
      </el-form-item>
      <el-form-item label="新密码">
        <el-input v-model="form.input4" placeholder="输入新密码"></el-input>
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input v-model="form.input5" placeholder="请确认新密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">重置密码</el-button>
      </el-form-item>
    </el-form>
  </div>
</div>
</template>

<script>
import mynav from "../components/mynav";
export default {
  name: "userinfo",
  components:{
    mynav
  },
  data() {
    return {
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        resouce2:'',
        desc: '',
        input1:'',
        input2:'',
        input3:'',
        input4:'',
        input5:''
      }
    }
  }
}
</script>

<style scoped>
.userinfo{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background:url("../assets/contentback.png");
  height:100%;
  background-size:100% 100%;
}
.navclass{
  width: 100%;
  height: 80px;
}
.changeinfo{
  margin-top: 80px;
}
</style>
